<template>
  <div class="app">
    <ele-main
      :checkedAll="leftcheckedAll"
      @changeChecked="changeChecked"
      :list="leftList"
      :Length="leftListLength"
      @changeAllCk="changeAllCkLeft"
    ></ele-main>
    <ele-button
      :leftListLength="leftListLength"
      :rightListLength="rightListLength"
      @changeBtntext="changeBtntext"
    ></ele-button>
    <ele-main
      :checkedAll="rightcheckedAll"
      @changeChecked="changeChecked"
      :list="rightList"
      :Length="rightListLength"
      @changeAllCk="changeAllCkRight"
    ></ele-main>
  </div>
</template>

<script>
import EleMain from "./components/EleMain.vue";
import EleButton from "./components/EleButton.vue";

export default {
  
  data() {
    return {
      rightList: [
        { id: 2, text: "备选项", disabled: false, checked: false },
        { id: 3, text: "备选项", disabled: true, checked: false },
        { id: 4, text: "备选项", disabled: false, checked: false },
        { id: 5, text: "备选项", disabled: false, checked: false },
        { id: 15, text: "备选项", disabled: true, checked: false },
        { id: 16, text: "备选项", disabled: false, checked: false },
      ],

      leftList: [
        { id: 1, text: "备选项", disabled: false, checked: false },
        { id: 6, text: "备选项", disabled: false, checked: false },
        { id: 7, text: "备选项", disabled: true, checked: false },
        { id: 8, text: "备选项", disabled: false, checked: false },
        { id: 9, text: "备选项", disabled: true, checked: false },
        { id: 10, text: "备选项", disabled: false, checked: true },
        { id: 11, text: "备选项", disabled: false, checked: false },
        { id: 12, text: "备选项", disabled: false, checked: false },
        { id: 13, text: "备选项", disabled: true, checked: false },
        { id: 14, text: "备选项", disabled: false, checked: true },
      ],
      // listAll: this.leftList.concat(this.rightList),
    };
  },
  methods: {
    //获取父组件的全选框的值取反 左
    changeAllCkLeft() {
      const checked = !this.leftcheckedAll;
      this.leftList.forEach((v) => {
        if (!v.disabled) {
          v.checked = checked;
        }
      });
    },

    //获取父组件的全选框的值取反 右
    changeAllCkRight() {
      const checked = !this.rightcheckedAll;
      this.rightList.forEach((v) => {
        if (!v.disabled) {
          v.checked = checked;
        }
      });
    },

    // 根据id修改input的checked
    changeChecked(id) {
      //因为无法确定传回来的是那边的值，所以根据id的唯一性两边都进行判断，先进行左边数据的判断，返回-1说明该元素在右数据
      let index = this.leftList.findIndex((v) => v.id === id);
      if (index != -1) {
        this.leftList[index].checked = !this.leftList[index].checked;
      } else {
        index = this.rightList.findIndex((v) => v.id === id);
        this.rightList[index].checked = !this.rightList[index].checked;
      }
    },

    //根据传回来的值进行判断，如果为>说明是，左边数据向右传递，定义一个数组接受左元素被选中的值，同时左元素进行过滤筛选出剩下的值用左元素接收，再让右元素与变量元素拼接，用右元素接收，如果为<则相反
    changeBtntext(value) {
      let temporaryList;
      if (value === ">") {
        temporaryList = this.leftList.filter((v) => v.checked);
        this.leftList = this.leftList.filter((v) => v.checked === false);
        temporaryList.forEach((v) => (v.checked = false));
        this.rightList = this.rightList.concat(temporaryList);
      } else {
        temporaryList = this.rightList.filter((v) => v.checked);
        this.rightList = this.rightList.filter((v) => v.checked === false);
        temporaryList.forEach((v) => (v.checked = false));
        this.leftList = this.leftList.concat(temporaryList);
      }
    },
  },

  computed: {
    // 计算左，右元素的长度，当一个元素或以上被选中按钮才能使用
    leftListLength() {
      return this.leftList.filter((v) => v.checked === true).length ;
    },
    rightListLength() {
      return this.rightList.filter((v) => v.checked === true).length ;
    },

    // 全选按钮 当被选中的元素个数等于总数组长度-被禁用的数据长度，则全选框被选中
    leftcheckedAll() {
      return (
        this.leftList.filter((v) => v.checked).length ===this.leftList.filter((v) => !v.disabled).length&& this.leftList.length!=0
      );
    },
    rightcheckedAll() {
      return (
        this.rightList.filter((v) => v.checked).length ===this.rightList.filter((v) => !v.disabled).length&& this.rightList.length!=0
      );
    },
  },

  components: {
    EleMain,
    EleButton,
  },

  beforeCreate() {
        this.color = 'bc-header-red';
        document.body.style.backgroundColor = '#f4f0dc';
    },
};
</script>

<style scoped>
.app {
  width: 800px;
  display: inline-flex;
  justify-content: center;
  margin: 200px 0 0 375px;
  background-color: #cbd3d6;
  align-items: center;
  height: 400px;
}
</style>